<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户账号">
              <a-input placeholder="请输入" v-model="queryParam.username"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户姓名">
              <a-input placeholder="请输入" v-model="queryParam.realname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户状态">
              <j-dict-select-tag allowClear v-model="queryParam.status" placeholder="请选择" dictCode="status" />
            </a-form-item>
          </a-col>

          <template v-if="toggleSearchStatus">
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="创建时间">
                <a-range-picker allowClear class="per100" v-model="tempTimes" @change="timeChange" />
              </a-form-item>
            </a-col>
          </template>

          <a-col :sm="24" :md="12" :xl="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator mt10">
      <a-button type="success" icon="plus" @click="handleAdd()">新增</a-button>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="deviceId"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{ x: 1200 }"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a-button type="cyan" class="ml5 mr5" size="small" @click="handleUpdate(record.id, 'detail')">
          详情
        </a-button>
        <a-button type="primary" class="ml5 mr5" size="small" @click="handleUpdate(record.id, 'edit')">
          编辑
        </a-button>
        <a-button type="success" class="ml5 mr5" size="small" @click="showModal(record, 'ResetPasswordRef')"
          >重置密码</a-button
        >
        <a-button
          type="orange"
          class="ml5 mr5"
          size="small"
          v-if="parseInt(record.status) === 1"
          @click="updateAccountStatus(record.id, '2')"
          >冻结</a-button
        >
        <a-button
          type="primary"
          class="ml5 mr5"
          size="small"
          v-if="parseInt(record.status) === 2"
          @click="updateAccountStatus(record.id, '1')"
          >解冻</a-button
        >
        <a-button type="danger" class="ml5 mr5" size="small" @click="cancelUser(record.id)">删除</a-button>
      </span>
    </a-table>

    <reset-password ref="ResetPasswordRef" @ok="loadData()"></reset-password>
    <user-add ref="UserAddRef" @ok="loadData()"></user-add>
    <user-detail ref="UserDetailRef" @ok="loadData()" :model="model" :business-id="selectedBusinessId"></user-detail>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Api from '@/api/AgentManage/AgentManage'
import CommonApi from '@/api/Common/index'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import { getAction, httpAction } from '@/api/manage'
import { frozenBatch } from '@api/api'
import AgentManage from '@api/AgentManage/AgentManage'
import ResetPassword from '@views/AgentManage/Modal/ResetPassword'
import UserAdd from '@views/UserManage/Modal/UserAdd'
import UserDetail from '@views/UserManage/Modal/UserDetail'

export default {
  name: 'UserList',
  mixins: [JeecgListMixin],
  components: { ResetPassword, UserAdd, UserDetail },
  data() {
    return {
      url: {
        list: Api.list,
        cancel: AgentManage.cancel
      },
      columns: [],
      statusOptions: [],
      model: '',
      selectedBusinessId: '',
      queryParam: {
        agentType: 3
      }
    }
  },
  created() {
    this.columns = [
      {
        title: '序号',
        dataIndex: 'index',
        width: 50,
        customRender: (text, record, index) => `${index + 1}`
      },
      {
        title: '用户账号',
        dataIndex: 'username',
        width: 150,
        sorter: (a, b) => {
          return a.username - b.username
        }
      },
      {
        title: '用户姓名',
        dataIndex: 'realname',
        sorter: (a, b) => {
          return a.realname - b.realname
        },
        width: 200
      },
      {
        title: '昵称',
        dataIndex: 'nickName',
        sorter: (a, b) => {
          return a.nickName - b.nickName
        }
      },
      {
        title: '手机号码',
        dataIndex: 'phone',
        width: 150,
        sorter: (a, b) => {
          return a.phone - b.phone
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 100,
        sorter: (a, b) => {
          return a.status - b.status
        },
        customRender: (text, record, index) => {
          //字典值替换通用方法
          return filterDictText(this.statusOptions, text)
        }
      },
      {
        title: '创建时间',
        dataIndex: 'createTime'
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        fixed: 'right',
        width: 460
      }
    ]
    this.initDictConfig()
  },
  methods: {
    // 初始化数据字典
    initDictConfig() {
      //初始化字典 - 状态
      initDictOptions('status').then(res => {
        if (res.success) {
          this.statusOptions = res.result
        }
      })
    },

    handleAdd() {
      this.$refs.UserAddRef.showModal()
    },

    // 新增机器
    handleUpdate(id, model) {
      this.model = model
      this.selectedBusinessId = id
      this.$nextTick(() => {
        this.$refs.UserDetailRef.showModal()
      })
    },

    updateAccountStatus(id, status) {
      frozenBatch({ ids: id, status: status }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    cancelUser(id) {
      let that = this
      this.$confirm({
        title: '删除账号',
        content: '确认删除此账号吗？',
        onOk: () => {
          getAction(that.url.cancel + id).then(res => {
            if (res.success) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },

    // 时间改变
    timeChange(e, arr) {
      if (arr[0]) {
        this.queryParam.startTime = arr[0]
        this.queryParam.endTime = arr[1]
      } else {
        this.queryParam.startTime = undefined
        this.queryParam.endTime = undefined
      }
    },

    // 展示弹窗
    showModal(record, name) {
      if (record === 'setMeal') {
        // 批量修改套餐
        if (!this.selectedRowKeys.length) {
          this.$message.error('请选择一个设备')
          return
        } else {
          this.$refs[name].showModal(record, this.selectedRowKeys)
        }
      } else {
        this.$refs[name].showModal(record)
      }
    }
  }
}
</script>

<style scoped></style>

